<script setup>
import { Tab, Tag, Image as VanImage, Search, Badge } from 'vant';
import { ref } from 'vue';
import { getMessagelist } from '@/api/message';
import { useRoute, useRouter } from 'vue-router'
import { showDialog } from 'vant';

const router = useRouter()
const route = useRoute()


// 定义一个变量用于列表的显示
const show = ref(true)

// 搜索绑定的
const value = ref('');

// 定义一个mes存放请求回来的数据
const mes = ref([])

// 定义一个变量存储搜索的数据
const searchMes = ref([])

// 消息搜索功能实现
function onSearch() {
    console.log(value.value);
    console.log(mes.value);
    // 不再展示消息列表，展示一个下拉的菜单
    show.value = false

    searchMes.value = mes.value.filter(item => {
        return item.nickname.slice(0,value.value.length) === value.value
    })
    
    if (!searchMes.value[0]) {
        showDialog({
            message: '没有该联系人',
        }).then(()=>{
            value.value = ''
            show.value = true
        })
    }
    console.log('搜索的数据', searchMes.value[0]);
}
// 点消息的时候触发
function toGit(id) {
    console.log(id);
    window.localStorage.setItem('id', id)
    router.push('/chat')
}

// 发送消息请求
getMessagelist().then(res => {
    mes.value = res.data.message
    // console.log(mes.value)

})


</script>

<template>
    <div class="box" >
        <!-- 2.表单组件————搜索  点击键盘上的搜索/回车按钮后触发-->
        <van-search @search="onSearch" v-model="value" input-align="left" shape="round" placeholder="请输入搜索关键词" />
        <div class="content ">
            <!-- 3.1消息列表 -->
            <van-tag type="danger" size="large" v-if="show" v-for="item in mes" :key="item.id" @click="toGit(item.id)">
                <!-- 基础组件————image图片 -->
                <van-image round width="55px" height="55px" :src="item.url" />
                <div class="text" style="margin-left: 20px; position: relative;">
                    <p class="p1">{{ item.nickname }}</p>
                    <p class="p2">{{ item.information }}</p>
                    <!-- 展示组件————Badge微徽 -->
                    <van-badge :content="item.information_number" style="position: absolute; top: 30px; " />
                </div>
            </van-tag>


            <!-- 3.2搜素时显示的内容 -->
            <van-tag v-else type="danger" size="large" v-for="item in searchMes" @click="toGit(item.id)">

                <van-image round width="55px" height="55px" :src="item.url" />
                <div class="text" style="margin-left: 20px; position: relative;">
                    <p class="p1">{{ item.nickname }}</p>
                    <p class="p2">{{ item.information }}</p>
                    <!-- 展示组件————Badge微徽 -->
                    <van-badge :content="item.information_number" style="position: absolute; top: 30px; " />
                </div>
            </van-tag>
        </div> 
    </div>
</template>


<style lang="scss" scoped>
* {
    margin: 0;
    padding: 0;
}

.van-search {
    margin-bottom: 10px;
    width: 94%;
    margin: 0 auto;
}

.van-tabs {
    width: 204px;

}

.van-tag {
    display: flex;

    .text {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;

    }

    .p2 {
        font-size: 12px;
        color: rgb(181, 181, 181);
    }
}

.active {
    font-size: 50px;
}

.van-tag--large {
    margin: 0 auto;
    width: 336px;
    height: 60px;
    color: black;
    background-color: #FFF;
    border-bottom: 1px solid rgb(248, 239, 239);
}
</style>